<template>
  <div class="view-output">
    <div class="output-table">
      <je-table
        ref="xTable"
        border
        auto-resize
        show-overflow="ellipsis"
        keep-source
        show-header-overflow
        :data="tabelData"
        resizable
        size="small"
        height="100%"
        header-align="center"
        :scroll-y="{ mode: 'wheel' }"
        :edit-config="{
          trigger: 'click',
          mode: 'cell',
          showUpdateStatus: true,
          showInsertStatus: false,
        }"
      >
        <je-column field="tableCode" :title="$t('viewModal.outputView.tableColumn')" width="150">
          <template #default="{ row }">
            <span v-html="formatSearchData(row.tableCode)"> </span>
          </template>
        </je-column>
        <je-column
          field="column"
          :title="$t('viewModal.outputView.codeColumn')"
          width="220"
          :edit-render="inputRender"
        >
          <template #edit="{ row }">
            <je-input v-model:value="row.column" />
          </template>
          <template #default="{ row }">
            <span v-html="formatSearchData(row.column)"> </span>
          </template>
        </je-column>
        <je-column
          field="name"
          :title="$t('viewModal.outputView.nameColumn')"
          width="220"
          :edit-render="inputRender"
        >
          <template #edit="{ row }">
            <je-input v-model:value="row.name" />
          </template>
          <template #default="{ row }">
            <span v-html="formatSearchData(row.name)"> </span>
          </template>
        </je-column>
        <je-column
          field="value"
          :title="$t('viewModal.outputView.valueColumn')"
          width="220"
        ></je-column>

        <je-column field="dataType" :title="$t('viewModal.outputView.typeColumn')" width="120">
          <template #default="{ row }">
            {{ getSelectLabel(row.dataType, tableOutputdata.typeOptions) }}
          </template>
        </je-column>
        <je-column field="length" :title="$t('viewModal.outputView.lengthColumn')" width="100">
        </je-column>
        <je-column
          field="grouping"
          :title="$t('viewModal.outputView.groupColumn')"
          width="80"
          align="center"
        >
          <template #default="{ row }">
            <je-checkbox v-model:checked="row.grouping" />
          </template>
        </je-column>
        <je-column
          field="formula"
          :title="$t('viewModal.outputView.formulaColumn')"
          :edit-render="{}"
          width="100"
        >
          <template #edit="{ row }">
            <je-select
              v-model:value="row.formula"
              allow-clear
              style="width: 100%"
              @change="xTable.$plugin.updateStatus(scope)"
            >
              <je-select-option
                v-for="item in tableOutputdata.formulaOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </je-select-option>
            </je-select>
          </template>
          <template #default="{ row }">
            {{ getSelectLabel(row.formula, tableOutputdata.formulaOptions) }}
          </template>
        </je-column>
        <je-column
          field="sort"
          :title="$t('viewModal.outputView.orderColumn')"
          :edit-render="{}"
          width="120"
          align="center"
        >
          <template #edit="{ row }">
            <je-select
              v-model:value="row.sort"
              style="width: 100%"
              @change="xTable.$plugin.updateStatus(scope)"
            >
              <je-select-option
                v-for="item in tableOutputdata.orderOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </je-select-option>
            </je-select>
          </template>
          <template #default="{ row }">
            {{ getSelectLabel(row.sort, tableOutputdata.orderOptions) }}
          </template>
        </je-column>
        <je-column
          field="whereColum"
          :title="$t('viewModal.outputView.conditionalColumn')"
          :edit-render="inputRender"
          width="180"
        >
          <template #edit="{ row }">
            <je-input v-model:value="row.whereColum" />
          </template>
        </je-column>
        <template #tbar>
          <div class="title">
            以下为输出列展示信息
            <div class="searchInput">
              <je-input-search
                v-model:value="searchValue"
                :placeholder="$t('searchText')"
                style="width: 280px"
                :allow-clear="allowclear"
                :enter-button="$t('searchText')"
                @search="queryTable"
              >
                <template #prefix> <i class="fal fa-search" /> </template> </je-input-search
            ></div>
          </div>
        </template>
      </je-table>
    </div>
  </div>
</template>

<script>
  import { defineComponent, ref, watch, reactive } from 'vue';
  import { Input, Grid, Select, Checkbox } from '@jecloud/ui';
  import { inputRender, numberRender } from '@/helper/edit-render';
  import { useSourceStore } from '@/store/source-store';
  export default defineComponent({
    name: 'SourceViewOutput',
    components: {
      JeInput: Input,
      JeInputSearch: Input.Search,
      JeTable: Grid,
      JeColumn: Grid.Column,
      JeSelect: Select,
      JeSelectOption: Select.Option,
      JeCheckbox: Checkbox,
    },
    props: {
      outPutData: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    emits: ['setChangeType'],
    setup(props, { emit }) {
      const sourceStore = useSourceStore(); //数据源全局状态
      const xTable = ref(null);
      const searchValue = ref('');
      const tabelData = ref(props.outPutData);
      const oldTableData = ref(props.outPutData);

      const tableOutputdata = reactive({
        typeOptions: [
          { value: 'ID', label: '主键' },
          { value: 'VARCHAR30', label: '字符串(30)' },
          { value: 'VARCHAR50', label: '字符串(50)' },
          { value: 'VARCHAR100', label: '字符串(100)' },
          { value: 'VARCHAR255', label: '字符串(255)' },
          { value: 'VARCHAR1000', label: '字符串(1000)' },
          { value: 'VARCHAR4000', label: '字符串(4000)' },
          { value: 'VARCHAR', label: '字符串' },
          { value: 'FOREIGNKEY', label: '外键' },
          { value: 'NUMBER', label: '整数' },
          { value: 'DATE', label: '日期' },
          { value: 'DATETIME', label: '日期时间' },
          { value: 'FLOAT', label: '小数' },
          { value: 'FLOAT2', label: '小数(2)' },
          { value: 'YESORNO', label: '是非' },
          { value: 'CLOB', label: '超大文本' },
          { value: 'BIGCLOB', label: '巨大文本' },
          { value: 'CUSTOM', label: '自定义' },
        ],
        formulaOptions: [
          { value: 'Sum', label: 'Sum' },
          { value: 'Avg', label: 'Avg' },
          { value: 'Min', label: 'Min' },
          { value: 'Max', label: 'Max' },
          { value: 'Count', label: 'Count' },
        ],
        orderOptions: [
          { value: 'asc', label: '升序' },
          { value: 'desc', label: '降序' },
        ],
      });

      const numType = ref(1);
      watch(
        () => props.outPutData,
        (newVal) => {
          tabelData.value = newVal;
          oldTableData.value = newVal;
          xTable.value.$plugin.loadData(newVal);
          if (numType.value == 2) {
            emit('setChangeType');
          }
          if (numType.value == 1) {
            numType.value++;
          }
        },
        { deep: true },
      );
      //搜索
      watch(
        () => searchValue.value,
        (newVal) => {
          if (!newVal) {
            searchType.value = false;
          }
        },
      );

      const queryTable = () => {
        searchType.value = false;
        if (searchValue.value == '') {
          tabelData.value = oldTableData.value;
          return false;
        }
        const newData = [];
        oldTableData.value.forEach((item) => {
          if (
            item.column.indexOf(searchValue.value.trim()) != -1 ||
            item.name.indexOf(searchValue.value.trim()) != -1 ||
            item.tableCode.indexOf(searchValue.value.trim()) != -1
          ) {
            newData.push(item);
          }
        });
        if (searchValue.value) {
          searchType.value = true;
        }
        tabelData.value = newData;
      };

      //列表单元格格式化
      const getSelectLabel = (value, list, valueProp = 'value', labelField = 'label') => {
        const item = list.find((item) => item[valueProp] === value);
        return item ? item[labelField] : null;
      };

      const searchType = ref(false);
      const formatSearchData = (name) => {
        let text = name;
        if (name && name != undefined && searchValue.value.length > 0 && searchType.value) {
          var re = new RegExp(searchValue.value, 'g');
          let replaceString = '<span style="color:red;">' + searchValue.value + '</span>';
          text = name.replace(re, replaceString);
        }
        return text;
      };
      //监听输出视图发生变化
      watch(
        () => tabelData.value,
        (val) => {
          const curSourceCode = sourceStore.getSourceCode();
          const curSourceData = sourceStore.getSourceDataByCode(curSourceCode);
          curSourceData.DATASOURCE_OUTPUT_COLUMNS = JSON.stringify(val);
        },
        { deep: true },
      );

      return {
        searchValue,
        tabelData,
        queryTable,
        tableOutputdata,
        getSelectLabel,
        xTable,
        allowclear: true,
        numType,
        inputRender,
        numberRender,
        formatSearchData,
        searchType,
      };
    },
  });
</script>

<style lang="less" scoped>
  .view-output {
    height: 100%;
    .title {
      height: 40px;
      background: #ffffff;
      line-height: 40px;
      font-size: 14px;
      padding: 0 16px;
      color: #a9aba9;
      border-top: 1px solid #e6e6e6;
      // border-bottom: 1px solid #e6e6e6;
      position: relative;
    }
    .output-table {
      height: 100%;
    }
  }
</style>
<style lang="less">
  .view-output {
    .title {
      .searchInput {
        height: 40px;
        border-radius: 0;
        position: absolute;
        right: 20px;
        margin-top: 3px;
        display: inline-block;
      }
      .ant-input-search-button {
        width: 60px;
      }
      .ant-input-search {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
      }
      .ant-input-search.ant-input-affix-wrapper:hover {
        border: 1px solid #5c8dff !important;
        box-shadow: none !important;
      }
      .ant-input-search.ant-input-affix-wrapper-focused {
        border: 1px solid #5c8dff !important;
        box-shadow: none !important;
      }
    }
  }
</style>
